<template>
    <div class="backgroud">
        <mt-header fixed title="个人资料" style="z-index: 999999;">
            <span slot="left" @click="goBack">
                <mt-button icon="back" slot="left">返回</mt-button>
            </span>
        </mt-header>
            <div class="mui-content">
                    <div class="mui-input-group">
                        <div class="mui-input-row">
                            <p>用户名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{username}}</p>
                        </div>
                        <div class="mui-input-row">
                            <p>手机号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{phoneNumber}}</p>
                        </div>
                        <div class="mui-input-row">
                            <p>角色:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{roles}}</p>
                        </div>
                    </div>
            </div>
            </div>
</template>

<script>
    export default{
        data() {
            return {
                username:'',
                phoneNumber:'',
                roles:''
            }
        },	
        created() {
            this.sessionId = localStorage.getItem('sessionId');
            this.getuserinfo();
        },
        watch: {
           
            },
        methods: {
            goBack() {
                //点击后退
                this.$router.go(-1);
            },
            getuserinfo(){
                this.axios.post('http://zxdc.catsic.com:9090/sampling/user/getuserinfo',{'data':{}},{
                                    'headers':{
                                        'Content-Type':'application/json',
                                        'mobileHeader':'{"sessionId":'+this.sessionId+'}'
                                        }
                                        }).then(result=>{
                                            if(result.data.status == "1000"){
                                                this.username = result.data.data.userName;
                                                this.phoneNumber = result.data.data.phone;
                                                this.roles = result.data.data.userInfoRoles;
                                                console.log(result);
                                            }else if(result.data.status == "4001"||result.data.status == "5005"||result.data.status == "1002"){
                                                this.dateFlag = true;
                                                this.sessionId = "";
                                                localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                                this.$store.commit("outLogin");
                                                this.msg = result.data.msg;
                                                Toast(this.msg);
                                                this.$router.push({
                                                    path:'/login'
                                                });
                                            }
                                });
            }
        },

    }
</script>

<style lang="scss" scoped>
    .mui-btn {
            padding: 10px;
            height: 100%;
        }
        
        .mui-input-group {
            background: transparent;
            margin-left: 8%;
            margin-right: 8%;
            border: none !important;
        }
        
        .mui-input-group:after {
            height: 0px;
        }
        
        .mui-input-group:before {
            height: 0px;
        }
        
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        
        .mui-input-row label {
            float: right;
            width: 50%;
            font-size: 15px;
        }
        
        .mui-input-row label~input {
            float: left;
            width: 40%;
            padding-left: 15px;
        }
        p{
            margin-left: 6%;
            margin-top: 5%;
            color: black;
        }
    
</style>